<!doctype html>
<html>
<head>
    <title>时间展示</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link href="https://api.asiatechwire.com/favicon.ico" rel="icon" type="image/x-icon"/>
</head>
<style>
    .fuwuqi, .liulanqi, .to, .diff {
        text-align: center;
        padding: 5% 0 0 0;
    }

</style>
<body>

<div class="fuwuqi">
    <p>服务器时间戳：<span class="time">{{$now}}</span></p>
    <p>服务器时间：<span class="date">{{$date}}</span></p>
    <p>服务器转浏览器时间：<span class="to">{{$date}}</span></p>
</div>

<div class="liulanqi">
    <p>浏览器时间戳：<span class="time">{{$now}}</span></p>
    <p>浏览器时间：<span class="date"></span></p>
</div>


<div class="diff">
    <p>服务器与浏览器时间差：<span class="time">{{$now}}</span>小时</p>
</div>


<script>

    // js 显示浏览器时间戳 .liulanqi .time
    const newDate = getDate();
    const stamp = parseInt(getTime(newDate));
    const l_time = document.querySelector('.liulanqi .time');
    const l_date = document.querySelector('.liulanqi .date');
    if (l_time) {
        l_time.textContent = stamp;
    }
    if (l_date) {
        l_date.textContent = getDateTime(newDate);
    }


    // 显示服务器时间戳
    const to_date = document.querySelector('.fuwuqi .to');
    if (to_date) {
        to_date.textContent = getDateTime(new Date({{$now*1000}}));
    }

    // 服务器与浏览器时间差
    const diff_time = document.querySelector('.diff .time');
    if (diff_time) {
        diff_time.textContent = parseInt(({{$now}} - stamp)/3600);
    }


    // 将时间戳转换为日期格式
    function getDateTime(date) {
        var YY = date.getFullYear() + '-';
        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return YY + MM + DD + ' ' + hh + mm + ss;
    }

    // 获取浏览器时间戳
    function getTime(date) {
        return date.getTime() / 1000;
    }

    // 实例化浏览器时间
    function getDate() {
        return new Date();
    }

</script>

</body>
</html>

